JavaScript 是一種「事件驅動程式設計（Event-Driven Programming）」的語言，透過觸發事件的方式來執行相對應的程式碼。以前端的網頁來說，JavaScript 可以監聽使用者對網頁做的一些行為（像是滑鼠點擊、鍵盤輸入等），ming），並在觸發事件後執行想要的動作。接下來要介紹幾種監聽事件的幾種方式。

透過 addEventListener 方法

addEventListener() 是最常見也是最推薦的方式，它允許我們為特定的 HTML 元素添加對應事件（例如點擊、輸入等）的監聽器。

const myBtn = document.getElementById('button');

function myFn() {
  console.log('被點擊了！');
}

myBtn.addEventListener('click', myFn);

若已經用 addEventListener() 新增了一個事件監聽器，且之後不再需要監聽的時候，務必使用 removeEventListener() 方法來移除它，以避免其持續占用記憶體。

myBtn.removeEventListener('click', myFn);

另外每個 HTML 元素都可以透過 addEventListener() 添加多個監聽器，並且這些監聽器會按照它們被添加的順序來觸發。

myBtn.addEventListener('click', () => console.log('第一個監聽器'));
myBtn.addEventListener('click', () => console.log('第二個監聽器'));

透過事件處理屬性

每個 DOM 元素都有** on 開頭**的事件屬性，例如 onclick、onchange。我們可以直接將這些屬性設置為一個函式，當事件發生時，該函式將被觸發。

const myBtn = document.getElementById('button');
myBtn.onclick = () => console.log('被點擊了');

但這種方式無法為元素設置多個同類型的處理器，最後設置的函式會蓋掉之前的函式。

透過內聯事件處理（不推薦使用）

我們也可以透過內聯的方式直接將事件處理邏輯嵌入到 HTML 標籤的屬性中。

<button onclick="alert('被點擊了！')">點擊我</button>

然而，這種方式不太推薦，因為它將 HTML 和 JavaScript 程式碼混在一起，難以維護和管理。

以上是三種添加事件監聽器的方式，總結來說還是 addEventListener 最推薦使用，畢竟他是最常見，而且也能對同元素添加多個監聽器的方式。另外並不建議透過內聯方式來添加事件處理，因為直接將 JavaScript 程式碼放在 HTML 標籤並不是很好的方式。那麼今天就到這邊，明天見~